<template>
  <dialog-container
    :deviceTypePro="this.deviceType"
    :visiblePro="this.selectVisible"
    @clickDialogClose="clickClose"
  >
    <dialog-title-view :titlePro="this.listData.title"></dialog-title-view>
    <div
      class="selectDialogItemsContainer"
      v-for="(item, key) in listData.list"
      :key="key"
      @click="clickItem(key)"
    >
      <dialog-select-item-view
        :titlePro="getItemTitle(key)"
        :subtitlePro="getItemSubtitle(key)"
        :selectedIndexPro="selectedIndex"
        :itemIndexPro="key"
        :darkModePro="darkMode"
        :itemTypePro="getItemType(key)"
        :showDividerLinePro="key !== listData.list.length - 1"
      ></dialog-select-item-view>
    </div>
    <card-divider :heightPro="8"></card-divider>
    <dialog-confirm-view></dialog-confirm-view>
  </dialog-container>
</template>
<script>
import { screenSize } from "../../../../assets/js/flexible.js";
import DialogContainer from "../DialogContainer.vue";
import DialogTitleView from "../DialogTitleView.vue";
import DialogConfirmView from "../DialogConfirmView.vue";
import DialogSelectItemView from "./DialogSelectItemView.vue";
import CardDivider from "../../CardDivider.vue";
export default {
  components: {
    DialogContainer,
    DialogTitleView,
    DialogConfirmView,
    DialogSelectItemView,
    CardDivider,
  },
  props: {
    listData: {},
    selectVisiblePro: {
      type: Boolean,
      default: false,
    },
    deviceTypePro: {
      type: Number,
      default: 1,
    },
    selectedIndexPro: {
      type: Number,
      default: -1,
    },
    darkModePro: {
      type: String,
      default: "light",
    },
    itemTypePro: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      deviceType: 1,
      selectVisible: false,
      selectedIndex: 3,
      darkMode: "light",
    };
  },
  mounted() {
    this.selectVisible = this.selectVisiblePro;
    this.deviceType = this.deviceTypePro;
    this.selectedIndex = 0;
    this.darkMode = this.darkModePro;
  },
  watch: {
    selectVisiblePro(newVal) {
      this.selectVisible = newVal;
    },
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
    selectedIndexPro(newVal) {
      this.selectedIndex = newVal;
      this.listData.selectedIndex = newVal;
      // console.log("SelectListDialog: this.selectedIndex = ", this.selectedIndex);
      // console.log("SelectListDialog: this.listData.selectedIndex = ", this.listData.selectedIndex);
    },
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
  },
  computed: {
    // getSelectDialogItemsContainerStyle() {
    //   var itemContainerHeight = screenSize(64);
    //   console.log(
    //     "SelectListDialog: getSelectDialogItemsContainerStyle(): itemContainerHeight = 64"
    //   );
    //   return { height: itemContainerHeight + "px" };
    // },
  },
  methods: {
    clickClose() {
      // console.log("SelectListDialog: 收到关闭消息 ");
      this.$emit("update:selectVisible", false);
    },
    clickItem(key) {
      this.listData.selectedIndex = key;
      this.$emit("clickItem", key);
    },
    getItemTitle(key) {
      return this.listData.list[key];
    },
    getItemSubtitle(key) {
      if (this.listData.subtitleList !== undefined) {
        return this.listData.subtitleList[key];
      } else {
        return "";
      }
    },
    getItemType(key) {
      if (this.listData.itemType !== undefined) {
        return this.listData.itemType[key];
      } else {
        //没有设置itemType值，默认值是0，item类型是“单行文本”
        return 0;
      }
    },
  },
};
</script>
<style scoped>
.selectDialogItemsContainer {
  /* position: relative; */
  width: 100%;
  /* height: 48px; */
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: start;
}
</style>
